<!--  -->
<template>
  <div id="swiper">
    <div class="wordTitle">
      {{ swiperTitle }} (多选)
    </div>
    <div class="contentBox">
      <div class="contenSon" v-for="(item,index) in newTabList" :key="index" @click.stop.prevent="getItemDetail(item,index)">
        <el-checkbox v-model="item.checked" :disabled="disbaledIsOpen">{{ item.ClientID }}</el-checkbox>
      </div>
    </div>
    <div class="pageTion">
      <el-pagination
        :small="true"
        :background="true"
        :page-size.sync="pageSize"
        @current-change="handleCurrentChange"
        :total="total">
      </el-pagination>
    </div>
    <!-- 针对开关做的弹框 -->
    <el-dialog
      title="设备详情"
      :visible.sync="showForDevice"
      @close="closeAddGroup"
      append-to-body
      width="60%">
      <el-form :model="detailsForDia" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
        <el-form-item label="开关默认状态" prop="switchDefStatus">
          <el-select v-model="detailsForDia.switchDefStatus" placeholder="请选择">
            <el-option
            v-for="(item,index) in detailsForDia.defaultSwitchArr"
            :key="index"
            :label="item.name"
            :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开关类型" prop="switchType">
          <el-select v-model="detailsForDia.switchType" placeholder="请选择">
            <el-option
            v-for="(item,index) in detailsForDia.switchTypeArr"
            :key="index"
            :label="item.name"
            :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始任务调度时间" prop="switchTime" v-if="detailsForDia.switchType === 0">
          <el-popover v-model="cronPopoverStrat" trigger="click" placement="right">
            <div class="testVcron">
              <vcrontab @hide="cronPopoverStrat=false" @fill="crontabFillStrat" :expression="detailsForDia.expressionStart"></vcrontab>
            </div>
            <el-input
              slot="reference"
              style="width: 250px;"
              @click="cronPopoverStrat = true"
              v-model="detailsForDia.expressionStart"
              placeholder="请输入定时策略"
              size="small"
            ></el-input>
          </el-popover>
        </el-form-item>
        <el-form-item label="结束任务调度时间" prop="switchTime" v-if="detailsForDia.switchType === 0">
          <el-popover v-model="cronPopoverEnd" trigger="click" placement="right">
            <div class="testVcron">
              <vcrontab @hide="cronPopoverEnd=false" @fill="crontabFillEnd" :expression="detailsForDia.expressionEnd"></vcrontab>
            </div>
            <el-input
              slot="reference"
              style="width: 250px;"
              @click="cronPopoverEnd = true"
              v-model="detailsForDia.expressionEnd"
              placeholder="请输入定时策略"
              size="small"
            ></el-input>
          </el-popover>
        </el-form-item>
      </el-form>
      <div style="width: 100%; text-align: center;">
        <el-button type="primary" @click="addDetailGroup">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // import引入的组件需要注入到对象中才能使用
  props: {
    disbaledIsOpen: {
      type: Boolean,
      default: false
    },
    tableList: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    swiperTitle: {
      type: String,
      default: ''
    },
    tagTitle: {
      type: String,
      default: ''
    }
  },
  data () {
    // 这里存放数据
    return {
      expression: '',
      cronPopoverStrat: false,
      cronPopoverEnd: false,
      detailsForDia: {
        expressionEnd: '',
        expressionStart: '',
        switchDefStatus: 1,
        defaultSwitchArr: [
          {
            name: '开',
            id: 1
          },
          {
            name: '关',
            id: 2
          }
        ],
        switchType: 1,
        switchTypeArr: [
          {
            name: '温度',
            id: 1
          },
          {
            name: '湿度',
            id: 2
          },
          {
            name: '无',
            id: 0
          }
        ]
      },
      rules: {
        switchDefStatus: [
          { required: true, trigger: 'change', message: '请选择' }
        ],
        switchType: [
          { required: true, trigger: 'change', message: '请选择' }
        ]
      },
      showForDevice: false,
      isShowIcon: false,
      clickPageShow: false,
      pageSize: 6,
      newTabList: this.tableList,
      arrList: [],
      tagItem: this.tagTitle,
      mySelf: false,
      recordsCurrentObj: {},
      recordsCurrentIndex: 0
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    tableList: {
      handler (newVal, oldVal) {
        this.newTabList = newVal
      },
      immediate: true
    },
    disbaledIsOpen: {
      handler (newVal, oldVal) {
        this.mySelf = newVal
      }
    }
  },
  // 方法集合
  methods: {
    // cron fun
    crontabFillStrat (v) {
      console.log(v)
      this.detailsForDia.expressionStart = v
    },
    crontabFillEnd (v) {
      this.detailsForDia.expressionEnd = v
    },
    addDetailGroup () {
      const currentTah = sessionStorage.getItem('currentTah')
      if (currentTah === undefined || currentTah === null) {
        this.$message({
          message: '请先选择设备',
          type: 'warning'
        })
      } else {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            setTimeout(() => {
              const nullObj = {}
              nullObj.switchId = this.recordsCurrentObj.ClientID
              nullObj.switchDefStatus = this.detailsForDia.switchDefStatus
              nullObj.switchType = this.detailsForDia.switchType
              nullObj.tahId = currentTah
              this.newTabList[this.recordsCurrentIndex].checked = true
              nullObj.openCron = this.detailsForDia.expressionStart
              nullObj.closeCron = this.detailsForDia.expressionEnd
              this.arrList.push(nullObj)
              sessionStorage.setItem(`setItem${this.tagItem}`, JSON.stringify(this.arrList))
              this.$forceUpdate()
              this.showForDevice = false
            }, 0)
          }
        })
      }
    },
    closeAddGroup () {
      this.showForDevice = false
    },
    handleCurrentChange (val) {
      this.$emit('handleCurrentChange', 6, val)
    },
    getItemDetail (item, index) {
      if (!this.mySelf) {
        if (!this.newTabList[index].checked) {
          this.showForDevice = true
          this.recordsCurrentObj = item
          this.recordsCurrentIndex = index
          this.arrList = JSON.parse(sessionStorage.getItem(`setItem${this.tagItem}`)) || []
        } else {
          setTimeout(() => {
            this.newTabList[index].checked = false
            this.$forceUpdate()
            this.arrList = JSON.parse(sessionStorage.getItem(`setItem${this.tagItem}`))
            const tag = this.arrList.findIndex(value => {
              return item.ClientID === value.switchId
            })
            this.arrList.splice(tag, 1)
            sessionStorage.setItem(`setItem${this.tagItem}`, JSON.stringify(this.arrList))
          }, 0)
        }
      } else {
        return false
      }
      // this.$emit('getSwiperName', this.arrList)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // this.arrList = sessionStorage.getItem()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
  .testVcron {
    width: 500px;
    height: 600px;
    overflow: scroll;
  }

  #swiper {
    height: 300px;
    padding: 5px;
    position: relative;
    background-color: #BBFFFF;
    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active 在 <2.1.8 版本中 */ {
      opacity: 0;
    }
    .wordTitle {
      padding: 3px 10px;
      font-size: 20px;
      font-weight: 400;
      width: 100%;
      text-align: center;
    }
    .rightIcon {
      background-color: #000;
      width: 50px;
      height: 50px;
      position: absolute;
      top: 50%;
      right: 5px;
      transform: translateY(-50px);
    }
    .leftIcon {
      background-color: #000;
      width: 50px;
      height: 50px;
      position: absolute;
      left: 5px;
      top: 50%;
      transform: translateY(-50px);
    }

    .contentBox {
      width: 100%;
      height: 85%;
      display: grid;
      position: relative;
      grid-template-columns: 32% 32% 32%;
      grid-template-rows: 40% 40% 40%;
      gap: 10px;
      .contenSon {
        box-shadow: 0 2px 12px 0 ;
        text-align: center;
        word-wrap: break-all;
        line-height: 128px;
      }
      .contenSon:hover {
        position: relative;
        top: 5px;
      }
    }
    .pageTion {
      position: absolute;
      bottom: 10px;
    }
  }
</style>
